<template>
<div class="team">
  <div class="tree_menu">
    <el-menu
        class="el-menu-vertical-demo"
        unique-opened
    >
      <el-submenu  v-for="item in teamData" :index="item.department.id">
        <template #title>
          <i class="el-icon-location"></i>
          <span>{{ item.department.name }}</span>
        </template>
        <el-menu-item-group>
          <el-menu-item :index="item.department.id" @click="changeTeam(item.department.id)">
            {{item.department.name}}
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
  <transition name="el-fade-in">
    <div class="content" v-show="isChange">
      <team-card :team="showTeam" :description="descript" :subject="subject" :pics="pics"></team-card>
    </div>
  </transition>
</div>
</template>

<script>
import teamCard from '../../components/TeamCard.vue'
import {getAllDeparts} from "../../api/api";
import {ElMessage} from "element-plus";

export default {

  name: "Index",
  components:{teamCard},
  mounted() {
    getAllDeparts({},{})
        .then(res=>{
          //console.log(res)
          if (res.ret === 0){
            ElMessage.success({
              type: 'success',
              message: res.msg
            })
            this.teamData = res.data
          }
          else{
            ElMessage.warning({
              type: 'warning',
              message: res.msg
            })
          }
        })
        .catch(err=>{
          console.log(err)
          ElMessage.error({
            type: 'error',
            message: err
          })
        })
  },
  watch: {

  },
  beforeRouteEnter(to, from, next) {
    // 添加背景色 margin:0;padding:0是为了解决vue四周有白边的问题
    document.querySelector('body').setAttribute('style', 'margin:0;padding:0;')
    next()
  },
  beforeRouteLeave(to, from, next) {
    // 去除背景色
    document.querySelector('body').setAttribute('style', '')
    next()
  },
  methods:{
    /*changeTeam(depart,tno){
      for (let d of this.teamData){
        if (d.id===depart){
          for (let t of d.teams){
            if (t.tno === tno){
              this.showTeam = t
              return ;
            }
          }
        }
      }
    },*/
    changeTeam(departId){
      for (let d of this.teamData){
        if (d.department.id === departId){
          this.showTeam = d.staffs
          this.descript = d.department.description
          this.subject = d.department.name
          this.pics = d.department.pics
          return ;
        }
      }
    }
  },
  data(){
    return{
      descript: '',
      subject: '',
      showTeam:'',
      pics:'',
      isChange:true,
      teamData:[

      ],
      defaultProps: {
        children: 'teams',
        label: 'team_name'
      },
      filterText: '',
    }
  }
}
</script>

<style scoped>

.content{

}
.team{
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  padding-bottom: 35px;
  padding-left: 30px;
}
.tree_menu{
  position: relative;
  top: 50px;
  left: 50px;
  width: 200px;
  height: auto;
}
::v-deep(.el-submenu__title){
  padding-right: 40px;
}

::v-deep(.el-submenu__title) span{
  font-size: 18px;
}

::v-deep(.el-submenu__title:hover){
  animation: pulse 1s;
}



/*::v-deep(.el-tree-node:focus){
  background: #FF6633;
}*/


</style>